<template>
  <div class="sim-console">
    <div v-if="consoleService.showSearch" class="top_input">
      <el-input
        v-model="consoleService.searchKey"
        autofocus
        size="medium"
        :prefix-icon="Search"
        :placeholder="$t('搜索')"
        @keydown="onSearchKeydown"
      />
      <!-- <div v-else class="start-filter-sign">
        <span>已筛选{{ renderData.records.length }}项内容</span>
        <text-button @click="() => consoleService.clearFilter()">清空筛选</text-button>
      </div> -->
    </div>
    <div
      v-scrollBottom="isOnArea"
      class="_panel-content"
      @mousemove="handleMouseover"
      @mouseleave="handleMouseleave"
    >
      <div
        v-for="item in renderData.records"
        :key="item.id"
        class="g-flex"
        :class="{
          'warn-text': item.level === 'WARN',
          'error-text': item.level === 'ERROR',
        }"
        style="font-size: 12px"
      >
        <span class="__log-time g-flex-0 g-m-r-4">{{ item.time }} : </span>
        <span v-if="item.context" class="__log-text g-flex-1" v-html="item.context" />
        <span v-else class="__log-text g-flex-1" />
      </div>
    </div>
    <div class="bottom_input">
      <icon-button class="prepend" label="matlab">
        <template #extra>
          <span class="g-m-l-5">>></span>
        </template>
      </icon-button>
      <el-input
        v-model="emulateText"
        :disabled="isCommandDisabled"
        v-on:keyup.enter="submitEmulateText"
      ></el-input
      ><span class="append">
        <sim-dropdown>
          Matlab<img src="statics/images/mainpage/selectLogo.svg" alt="" />
          <template #dropdown>
            <SimDropdownItem @click="changeStatus('MATLAB')">
              <span>MATLAB</span>
            </SimDropdownItem>
          </template>
        </sim-dropdown>
      </span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElNotification } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
import { controller } from "@/engine/Controller";
import SimDropdown from "@/components/dropdown/Dropdown.vue";
import SimDropdownItem from "@/components/dropdown/DropdownMenuItem.vue";
import IconButton from "@/components/IconButton/IconButton.vue";
// import TextButton from "@/components/TextButton/TextButton.vue";
import local from "@/util/local";

defineOptions({
  name: "sim-console",
});

const vScrollBottom = {
  updated(el: any, binding: any) {
    if (!binding.value) {
      el.scrollTop = el.scrollHeight;
    }
  },
};
const isOnArea = ref(false);
const handleMouseover = () => {
  isOnArea.value = true;
};
const handleMouseleave = () => {
  isOnArea.value = false;
};
const emulateText = ref("");
const langType = ref("MATLAB");
const isCommandDisabled = ref(false);
const consoleService = controller.consoleService;
const renderData = controller.consoleService.renderData;

const changeStatus = (value: string) => {
  langType.value = value;
};
const submitEmulateText = () => {
  isCommandDisabled.value = true;
  consoleService
    .submitEmulateText(emulateText.value, langType.value)
    .then((_res) => {
      emulateText.value = "";
      isCommandDisabled.value = false;
    })
    .catch((err) => {
      ElNotification({
        title: local.localeTrans("err"),
        message: `${local.localeTrans("exe")} ${
          langType.value
        } ${local.localeTrans("ins_fail")}`,
        type: "error",
      });
      isCommandDisabled.value = false;
      console.log(err);
    });
};
const onSearchKeydown = (evt: KeyboardEvent) => {
  if (evt.key === "Enter") {
    consoleService.filterStart = true;
    consoleService.filterLog();
  }
};
</script>
<style lang="scss">
.sim-console {
  height: 100%;
  display: flex;
  flex-flow: column;
  overflow: hidden;

  ._panel-content {
    box-sizing: content-box;
    padding: 8px 16px;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 20px;

    > div:last-child {
      margin-bottom: 5px;
    }
    .__log-time {
      color: #969899;
      user-select: text;
    }
    .__log-text {
      font-size: 11px;
      line-height: 19px;
      user-select: text;
    }

    .warn-text {
      color: #e8a113;
    }

    .error-text {
      color: #e72829;
    }
  }

  ._toolbar {
    height: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #dcdcdc;
    display: flex;
    align-items: center;

    .__spacer {
      margin: 0 6px;
      width: 1px;
      height: 16px;
      display: inline-block;
      background: #dcdcdc;
    }

    ._action-btn {
      line-height: 20px;
      display: inline-flex;
      align-items: center;
      padding: 0 4px;

      &:hover {
        background: linear-gradient(107deg, #a3dbff 0%, #74c5f8 100%);
      }

      &:active {
        background: linear-gradient(107deg, #7fc8f6 0%, #3ea5e6 100%);
      }

      img {
        margin-right: 0;
      }
    }

    ._toolbar-icon {
      position: relative;
    }
  }

  .top_input {
    .el-input__inner {
      border-left: 0;
      border-right: 0;

      &:focus {
        border-color: #dcdfe6;
      }
    }

    // .start-filter-sign {
    //   display: flex;
    //   justify-content: center;
    //   align-items: center;
    //   height: 28px;
    //   gap: 8px;
    //   border-top: 1px solid #dcdfe6;
    //   border-bottom: 1px solid #dcdfe6;
    //   font-size: 11px;
    // }
  }

  .bottom_input {
    width: 100%;
    height: 30px;
    display: flex;
    line-height: 30px;
    border-top: 1px solid #e4e4e4;
    background-color: #fff;
    .prepend {
      font-size: 11px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      text-align: center;
      padding-left: 16px;
    }

    .append {
      font-size: 12px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.65);
      width: 110px;
      text-align: center;
      cursor: pointer;

      img {
        margin-left: 5px;
      }

      border-left: 1px solid #e4e4e4;
    }

    .el-input {
      .el-input__inner {
        border: none;
        padding-left: 5px;
      }
    }
  }
}
</style>
